<template>
  <div class="integral">
    <div class="integral_title">抵扣规则</div>
    <div class="box">
      <div class="box_title">积分价值：</div>
      <div style="line-height:30px;">1积分= </div>
      <div class='box_input'>
        <input type="text" id="yuan"><label for='yuan'>元</label>
      </div>
    </div>
    <!-- <div class="box">
      <div class="box_title">抵扣项目：</div>
      <div class="box_main">
        <div class="main">
          <form name="my_form" method="POST" style="display: flex">
            <input type="radio" v-model="radioVal" name="question" value="0" id='s' style="width: 18px; height: 18px;" />
            <label for='s'>商品金额</label>
            <input type="radio" v-model="radioVal" name="question" id="y" value="1" style="width: 18px;height: 18px;"/>
            <label for="y">运费</label>
          </form>
        </div>
      </div>
    </div> -->
    <div class="box">
      <div class="box_title">下单可抵扣：</div>
      <div class="box_main">
        <div class="main">
          <input type="radio" v-model="radioVals" name="question1" value="0" id='s' style="width: 18px; height: 18px;" />
          <label for='s'>部分商品</label>
          <input type="radio" v-model="radioVals" name="question1" id="y" value="1" style="width: 18px;height: 18px;"/>
          <label for="y">全部商品</label>
        </div>
        <div v-if="radioVals==0">
          <div class='xuan' @click="choice">选择</div>
          <div class="box_list">
            <div v-for="(item,index) in list" :key="index" class="list">
              <img :src="item.img" />
              <span class="text">{{item.text}}</span>
              <span class="delete">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="box_title">抵扣比例：</div>
      <div class="box_main" style="display:flex;line-height:30px;">
          <div class='box_input'>
            <input type="text" id="yuan"><label for='yuan'>%</label>
          </div>
          <span class="goodsP">最多可抵扣商品总价格比例</span>
      </div>
    </div>
    <div class="box">
      <div class="box_title">默认使用：</div>
      <div class="box_main mo">
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#C1C1C1">
        </el-switch>
        <span style="margin-left:5px" v-if="value==true">已开启，结算时默认使用积分抵扣</span>
        <span style="margin-left:5px" v-else>已关闭，结算时默认使用积分抵扣</span>
      </div>
    </div>
    <div id="preservation">
        <el-button @click="save()">保存</el-button>
        <el-button @click="cancel()">取消</el-button>
      </div>
  </div><!-- integral -->
</template>
<script>
export default {
  data(){
    return{
      value: true,
      switchText:'已开启',
      radioVal: "0",//积分价值
      radioVals:'0',//下单抵扣
      list:[
        {img:require('../../../src/assets/img/a.jpg'),text:"补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔"},
        {img:require('../../../src/assets/img/a.jpg'),text:"补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔"},{img:require('../../../src/assets/img/a.jpg'),text:"补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔"},{img:require('../../../src/assets/img/a.jpg'),text:"补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔"},{img:require('../../../src/assets/img/a.jpg'),text:"补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔"},{img:require('../../../src/assets/img/a.jpg'),text:"补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔"},{img:require('../../../src/assets/img/a.jpg'),text:"补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔补水保湿控油隐形毛孔"},
      ]

    }
  },
  methods:{
    //选择按钮
    choice(){
      alert('111')
    },
    //保存
    save(){
      this.$message({
        type: "success",
        message: "保存成功",
      });
    },
    cancel(){
      this.$confirm('此操作将取消修改内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消成功!'
        });
      }).catch(() => {

      });
    }

  },
  created(){

  }
}
</script>
<style scoped>
.integral{
  width:99.3%;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  height:80vh;
  padding:0 30px;
}
.integral_title{
  height:60px;
  line-height:60px;
  font-size: 16px;
}
.box{
  display: -webkit-box;
  margin-bottom:15px;
  font-size: 12px;
}
.box .box_title{
  width:75px;
  height:30px;
  line-height: 30px;
}
.box_input{
  margin-left:10px;
  border:1px solid #DFDFDF;
  width:84px;
  height:25px;
  line-height: 25px;
  border-radius: 3px;
}
.box_input input{
  outline: none;
  border:none;
  padding:5px;
  box-sizing: border-box;
  width:55px;
  height:25px;
  line-height: 25px;
  font-size: 12px;
}
.main{
  display: flex;
  align-items: center;
  margin-top:2px;
}
.box_main label{
  font-size: 12rpx;
  margin-top:3px;
  margin-right:10px;
}
.proInput{
  width:75px;
  height:25px;
  line-height: 25px;
  border: 1px solid #DFDFDF;
  outline: none;
  margin-right:5px;
  border-radius: 5px;
  padding:0 10px;
  box-sizing: border-box;
}
.goodsP{
  color:#CBCBCB;
  font-size:10px;
  margin-left:5px;
}
.mo{
  height:30px;
  line-height:30px;
}
.xuan{
  width:47px;
  height:21px;
  line-height:22px;
  border-radius: 3px;
  text-align: center;
  /* border:1px solid #707070; */
  box-shadow: 0px 0px 2px 1px #B3B3B3;
  margin:10px 0;
}
.box_list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width:55%;
}
.list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border:1px solid #E9E9ED;
  border-radius: 8px;
  padding:4px 7px;
 width:30%;
 margin-bottom:10px;
}
.list img{
  width:35px;
  height:35px;
  
}
.list .text{
  width:70%;
  margin-left:5px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.list .delete{
  color:#436AF2;
  margin-left:5px;
  width:40px;
}
#preservation .el-button {
    width: 100px;
    height: 38px;
    border-radius: 5px;
    background-color: #436af2;
    color: #fff;
    margin-top: 2rem;
}
</style>